<template>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      prop="projectName"
      label="订单信息"
      width="230"
    >
    <template slot-scope="data">
      <div style="font-size: 14px;font-weight: bold;">{{ data.row.projectName}}</div>
      <div style="font-size: 12px;">{{ data.row.orderNo}}</div>
    </template>
  </el-table-column>
    <el-table-column
      prop="orderUserName"
      label="发布人"
      width="180"
    />
    <el-table-column
      prop="status"
      label="订单状态"
      width="180"
    >
      <template slot-scope="data">
        <div style="font-size: 12px;">浏览:{{ data.row.ViewCnt}}</div>
        <div style="font-size: 12px;">报价:{{ data.row.quoteCnt}}</div>
      </template>

    </el-table-column>
    
    <el-table-column
      prop="date"
      label="报价"
      width="180"
    >
    <template slot-scope="data">
      <el-button type="success" size="mini" @click="viewPriceHandle(data.row.id)">查看报价</el-button>
    </template>
  </el-table-column>

    <el-table-column
      prop="createTime"
      label="下单时间"
      width="180"
    />

    <el-table-column
      label="订单详情"
      width="180"
    >
      <template slot-scope="scope">
        <el-button type="success" size="small" @click="detailHandle(scope.row.id)">查看订单详情</el-button>
      </template>
    </el-table-column>

    <el-table-column
      label="操作"
      fixed="right"
      width="180"
    >
      <template slot-scope="scope">
        <el-button 
        v-if="scope.row.status == '待发布'||scope.row.status == '发单中'"
        type="primary" size="small" @click="canselHandle(scope.row)">取消订单</el-button>
        <el-button 
        v-if="scope.row.status != '待发布'||scope.row.status != '发单中'"
        type="primary" size="small" @click="onPushOrder(scope.row)">催单</el-button>
      </template>
    </el-table-column>>
  </el-table>
</template>

<script>
import Api from "./api.js"
export default ({
  name: 'WantOrderTable',
  props:['tableData'],
  data() {
    return {
    }
  },
  methods:{
    viewPriceHandle(id) {
      this.$emit('viewPriceHandle',id);
    },
    detailHandle(id) {
      this.$emit('detailHandle',id);
    },
    canselHandle(data) {
      this.$confirm('确定删除该条订单吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      }).then(action => {
        this.$emit('canselHandle', data);
      })
    },
    async onPushOrder(rowData) {
      const { data } = await Api.netYzOrderQuick(rowData);
      if (data.code === 200) {
        this.$message({
          message: data.msg || '操作成功',
          type: 'success',
        });
        this.$emit('refreshList');
      } else {
        this.$message({
          message: data.msg || '操作失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    }
  }
})

</script>
